/**
* @description:  待办 =》问题整改
* @author: JiWei
* @remark:
**/
<template>
  <view class="problem-main">
    <nav-bar class="header" back title="问题整改" @goBack="goBack"></nav-bar>
    <view class="problem-content">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />
      <view class="basic-info">
          <van-field  v-model="problemForm.engName" label="工程名称" placeholder="请选择工程名称"
                      type="textarea" autosize
                      disabled input-align="right"/>
          <van-field v-model="problemForm.siteName" label="站点名称" placeholder="请输入站点名称"
                     input-align="right" disabled/>
        <van-field v-model="problemForm.batchName" label="工程批次" placeholder="请输入工程批次"
                   input-align="right" disabled/>
        <van-field v-model="problemForm.consName" label="现场负责人" placeholder="请输入现场负责人"
                   input-align="right" disabled/>
      </view>
      <!-- 问题装置循环  -->
      <view>
        <!-- 第一层循环  -->
        <van-collapse v-model="problemActiveNames" >
			<view v-for="(firstItem,firstIndex) in rectificationList" :key="firstIndex+'33'">
			  <van-collapse-item class="arrive-fold" :name="firstItem.title" size="large">
				<template #title>
				  <view>
					<text class="title-collap">{{ firstItem.title }}</text>
				  </view>
				</template>
				<!-- 第二层循环 -->
				<van-collapse v-model="equipmentActiveNames" >
				  <view v-for="(equItem, equIndex) in firstItem.equList" :key="equIndex+'11'">
					  <van-collapse-item class="arrive-second" :name="equItem.title" size="large">
						<template #title>
						  <view>
							<text class="small-title">{{ equItem.title }}</text>
						  </view>
						</template>
						<!--   第三层循环  -->
						<view v-if="equItem.isNotList!==undefined">
						<view class="rectify-content" v-if="equItem.isNotList" v-for="(isNotItem,isNotIndex) in equItem.isNotList" :key="isNotIndex+'22'">
						  <van-field disabled v-model="isNotItem.selectName" :label="isNotItem.selectTitle" required :rules="[{ required: true}]" input-align="right"
									 :placeholder="`请选择${isNotItem.selectTitle}`" right-icon="arrow" @click-right-icon="onOpenPicker(isNotItem,[firstIndex,equIndex,isNotIndex])" />
						  <view class="resctify-main">
                <!-- 整改前 选择是 -->
                <text>整改前</text>
                <template v-if="isNotItem.beforeIsSelect">
                  <view class="image-list" v-if="isNotItem.oldFlieList.length>0" v-for="(imgItem,imgIndex) in isNotItem.oldFlieList" :key="imgIndex+'44'">
                    <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgIndex, imgItem, 'PREVIEW',[firstIndex,equIndex,isNotIndex,imgIndex])">
                  </view>
                </template>
                <template v-else>
                  <view class="signintitle">
                    <view class="notes">不执行说明</view>
                    <view class="notestext">
                      <van-field v-model="isNotItem.notes" rows="1" disabled="" autosize label="" type="textarea" placeholder="请输入不执行说明" class="textarea" readonly/>
                    </view>
                  </view>
                </template>
                <!-- 整改后 选择是 -->
                <text>整改后</text>
                <template v-if="isNotItem.isSelect">
                  <view class="upload-button"
                    v-for="(upImgItem, upImgIndex) in isNotItem.fileList"
                    :style="{'background-image': `url(${upImgItem.bgImg})`}"
                    :key="upImgIndex+'55'"
                    @click.stop="imageHandle(upImgIndex,upImgItem,'CHOOSE',[firstIndex,equIndex,isNotIndex,upImgIndex])">
                    <view v-if="upImgItem.img" class="delete-icon" @click.stop="imageHandle(upImgIndex,upImgItem, 'DELETE',[firstIndex,equIndex,isNotIndex,upImgIndex])">
                    ×</view>
                    <img v-if="upImgItem.img" :src="upImgItem.img" alt="" @click.stop="imageHandle(upImgIndex,upImgItem, 'PREVIEW',[firstIndex,equIndex,isNotIndex,upImgIndex])">
                    <view v-if="upImgItem.img" class="small-name">{{upImgItem.previewName}}</view>

                  </view>
                </template>
                <template v-else>
                  <view class="signintitle">
                  <view class="notes">不执行说明</view>
                  <view class="notestext">
                    <van-field v-model="isNotItem.notesAfter" rows="1" autosize label="" type="textarea" placeholder="请输入不执行说明" class="textarea" />
                  </view>
                  </view>
                </template>
						  </view>
						</view>
						</view>
						<van-button block v-if="!equItem.isSubmit" native-type="submit" @click="goSave(firstIndex,equIndex)">提交</van-button>
					  </van-collapse-item>
				   </view>
				</van-collapse>
			  </van-collapse-item>
		  </view>
        </van-collapse>


      </view>
<!--  是否隐蔽施工    -->
      <van-popup v-model="showSelectCovert" position="bottom">
        <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="covertNameColumns"
                    @confirm="onConfirm" @cancel="showSelectCovert = false" />
      </van-popup>

      <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
        <van-swipe>
          <div v-for="(image, index) in files" :key="index+'55'">
            <van-swipe-item v-if="image.img" style="text-align: center;">
              <img :src="image.img" />
            </van-swipe-item>
          </div>
        </van-swipe>
      </van-popup>
    </view>
  </view>
</template>
<script>
import navBar from "../../../../components/common/nav-bar";
import plateTitle from '../../common/plateTitle.vue'
import {Dialog, Toast} from "vant";
import wx from "../../../../static/common_js/jweixin_1.0.0";
import axios from 'axios'
import {merge} from "lodash";
import config from "../../../../common/config.js";
import { mapGetters } from "vuex";
import { isBase64, removeBaseUrl } from "../../../../utils"

export default {
  name: 'problemRectification',
  components: {navBar,plateTitle },
  props: {},
  data() {
    return {
      baseUrl:'',
      problemForm:{
        engName:'',
        siteName:'',
        batchName:'',
        consName:''
      },
      sfybsg:'',
      problemActiveNames: [],// 具体问题展开
      equipmentActiveNames: [],// 具体设备展开
      currentIndex: [],
      rectificationList:[
        {
          title: '切换装置',
          ID:'1', // 控制是否折叠
          equList:[
            {
              title:'切换装置1', //具体设备名称
              ID:'1', // 是否展开
              isNotList:[
                {
                  title: '安装',
                  selectTitle: '是否安装',
                  selectName: '否',
                  beforeIsSelect: 0,
                  isSelect: 0, // 0-否 1-是
                  oldFlieList:[],
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: '',
                      previewName: "资产全貌",
                      bgImg: require("../../../../static/img/bg_zcqm.png"),
                    },
                    {
                      img: '',
                      raw: null,
                      type: '',
                      previewName: "铭牌照片",
                      bgImg: require("../../../../static/img/bg_mpzp.png"),
                    },
                    {
                      img: '',
                      raw: null,
                      type: '',
                      bgImg: require("../../../../static/controlImg/bg_pz.png"),
                    }
                  ],
                  notes: ''
                },
                {
                  title: '单机调试',
                  selectTitle: '是否单机调试',
                  selectName: '否',
                  beforeIsSelect: 0,
                  isSelect: 0, // 0-否 1-是
                  oldFlieList:[],
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: '',
                      bgImg: require("../../../../static/controlImg/bg_pz.png"),
                    }
                  ],
                  notes: ''
                },
                {
                  title: '联网调试',
                  selectTitle: '是否联网调试',
                  selectName: '否',
                  beforeIsSelect: 0,
                  isSelect: 0, // 0-否 1-是
                  oldFlieList:[],
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: '',
                      bgImg: require("../../../../static/controlImg/bg_pz.png"),
                    }
                  ],
                  notes: ''
                },
                {
                  title: '隐蔽施工',
                  selectTitle: '是否隐蔽施工',
                  selectName: '是',
                  beforeIsSelect: 0,
                  isSelect: 0, // 0-否 1-是
                  oldFlieList:[],
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: '',
                      bgImg: require("../../../../static/controlImg/bg_pz.png"),
                    },
                  ],
                  notes: ''
                }
              ], //循环4组
            },
            {
              title:'切换装置2',
              ID:'2',
              isNotList:[
                {
                  title: '安装',
                  selectTitle: '是否安装',
                  selectName: '否',
                  beforeIsSelect: 0,
                  isSelect: 0, // 0-否 1-是
                  oldFlieList:[],
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: '',
                      previewName: "资产全貌",
                      bgImg: require("../../../../static/img/bg_zcqm.png"),
                    },
                    {
                      img: '',
                      raw: null,
                      type: '',
                      previewName: "铭牌照片",
                      bgImg: require("../../../../static/img/bg_mpzp.png"),
                    },
                    {
                      img: '',
                      raw: null,
                      type: '',
                      bgImg: require("../../../../static/controlImg/bg_pz.png"),
                    }
                  ],
                  notes: ''
                },
                {
                  title: '单机调试',
                  selectTitle: '是否单机调试',
                  selectName: '否',
                  beforeIsSelect: 0,
                  isSelect: 0, // 0-否 1-是
                  oldFlieList:[],
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: '',
                      bgImg: require("../../../../static/controlImg/bg_pz.png"),
                    }
                  ],
                  notes: ''
                },
                {
                  title: '联网调试',
                  selectTitle: '是否联网调试',
                  selectName: '否',
                  beforeIsSelect: 0,
                  isSelect: 0, // 0-否 1-是
                  oldFlieList:[],
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: '',
                      bgImg: require("../../../../static/controlImg/bg_pz.png"),
                    }
                  ],
                  notes: ''
                },
                {
                  title: '隐蔽施工',
                  selectTitle: '是否隐蔽施工',
                  selectName: '否',
                  beforeIsSelect: 0,
                  isSelect: 0, // 0-否 1-是
                  oldFlieList:[],
                  fileList: [
                    {
                      img: '',
                      raw: null,
                      type: '',
                      bgImg: require("../../../../static/controlImg/bg_pz.png"),
                    }
                  ],
                  notes: ''
                }
              ], //循环4组
            }
          ]
        },
      ],
      files:[],
      showPreview: false,
      showSelectCovert:false,
      showSelectInstall:false,
      pickerName: '',
      installName: '是否安装',
      covertNameColumns:['是','否'],
      delList:[],
      currentImgIndex:[],
      fileFormData: null,
			imgBase64: ''

    };
  },
  computed: {
    ...mapGetters(["userData"])
  },
  watch: {},
  onLoad(option) {
	  this.getproblemDetail(option.engId,option.stationId)
	  config.getOptions.then(res => {
	    this.baseUrl = res.firstUrl;
      // this.baseUrl = 'http://192.168.0.127:18001';
	  })
  },
  methods: {
	  goSave(firstIndex,equIndex){

		  Toast.loading({
		    duration: 0,
		    message: '加载中...',
		    forbidClick: true
		  })
		  let rectification = this.rectificationList[firstIndex];
		  let fillData = rectification.equList[equIndex].isNotList;
		  var params = {
		    objId: rectification.equList[equIndex].objId, //设备id
		    engId: rectification.engId, //工程id
		    neSn: rectification.equList[equIndex].title, //设备名称
		    isInstall: fillData[0].isSelect, //是否安装 0-否 1-是
		    isAlone: fillData[1].isSelect, //单机调试  0-否 1-是
		    isNetwork: fillData[2].isSelect, //联网调试  0-否 1-是
		    isHide: fillData[3].isSelect, //是否存在隐蔽施工  0-否 1-是
		    installNotesAfter: '', //安装备注
		    aloneNotesAfter: '', //单机调试备注
		    networkNotesAfter: '', //联网备注
		    hideNotesAfter: '', //隐蔽备注
			fillUser: this.userData.USERID,
			fillUsername:  this.userData.USERNAME
		  }
		  var formData = new FormData()
		  this.fileFormData = new FormData()
		  fillData.forEach((item, index) => {

        if (item.isSelect == 1) {
            let furlArr = []
            let flag = 3
            if (index == 0) {
              // 是否安装
              this.fileFormData.append(`requests[${index}].fl`, 2)  // 文件分类(类型)
            } else if (index == 1) {
              // 单机调试
              this.fileFormData.append(`requests[${index}].fl`, 3)  // 文件分类(类型)
            } else if (index == 2) {
              // 联网调试
              this.fileFormData.append(`requests[${index}].fl`, 4)  // 文件分类(类型)
            } else if (index == 3) {
              // 隐蔽施工
              this.fileFormData.append(`requests[${index}].fl`, 1)  // 文件分类(类型)
            }
		        item.fileList.forEach((e, i, arr) => {
              if(e.img){ // 去除最后一个
                if (isBase64(e.img)) { // 新拍照
                  if (e.raw) {
                    // this.fileFormData.append(`requests[${index}].files`, e.raw)
                    this.fileFormData.append(`requests[${index}].requests[${i}].file`, e.raw)
                    this.fileFormData.append(`requests[${index}].requests[${i}].flag`, i+1)
                  }
                } else { // 旧照
                  this.fileFormData.append(`requests[${index}].requests[${i}].furl`, removeBaseUrl(e.img, this.baseUrl))
                  this.fileFormData.append(`requests[${index}].requests[${i}].flag`, i+1)
                  // if (e.img) furlArr.push(removeBaseUrl(e.img, this.baseUrl))
                }
              }

		        })
            // this.fileFormData.append(`requests[${index}].furls`, furlArr.join())
            this.fileFormData.append(`requests[${index}].sfzx`, 2) // 整改后
            this.fileFormData.append(`requests[${index}].jlid`, rectification.equList[equIndex].objId)


		      } else {

            if (index == 0) {
              // 是否安装
                params.installNotesAfter = item.notesAfter
            } else if (index == 1) {
              // 单机调试
                params.aloneNotesAfter = item.notesAfter
            } else if (index == 2) {
              // 联网调试
                params.networkNotesAfter = item.notesAfter
            } else if (index == 3) {
              // 隐蔽施工
              params.hideNotesAfter = item.notesAfter
            }

          }



		  })
      this.handleFileUploads()
		  formData.append('fillDetail', JSON.stringify(params)) // 添加form表单中其他数据
		  let config = {
		    headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: uni.getStorageSync('token') || ''
        }
		  }
		  let url = ''
		  // #ifndef IGW
		  url = '/ap/txgcgk/api/fillDetailProblem/saveFillDetail'
		  // #endif
		  // #ifdef IGW
		  url = `${this.baseUrl}/txgcgk/api/fillDetailProblem/saveFillDetail`
		  // url = `http://192.168.124.75:18001/txgcgk/api/fillDetailProblem/saveFillDetail`
		  // #endif

		  axios.post(url, formData, config).then(res => {
		    Toast.clear()
		    if (res.data.code == 0) {

			    this.rectificationList[firstIndex].equList[equIndex].isSubmit = true;
		      Toast('提交成功')
		      // uni.navigateTo({
		      //   url: `/pages/communicationControl/workbench/constructionFilling/index`
		      // })
		    } else {
		      Toast.clear()
		      Toast(res.data.msg)
		    }
		  })
	  },
    handleFileUploads(){

		  let config = {
		    headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: uni.getStorageSync('token') || ''
        }
		  }

      let url = ''
		  // #ifndef IGW
		  url = '/ap/txgcgk/api/file/uploads'
		  // #endif
		  // #ifdef IGW
		  url = `${this.baseUrl}/txgcgk/api/file/uploads`
		  // url = `http://192.168.124.75:18001/txgcgk/api/file/uploads`
		  // #endif
      console.log('222222', this.fileFormData)
		  axios.post(url, this.fileFormData, config).then(res => {
		    Toast.clear()
		    if (res.data.code == 0) {
		      Toast('提交成功')
		    } else {
		      Toast.clear()
		      Toast(res.data.msg)
		    }
		  })
    },
	  getproblemDetail(engId,stationId){
		  let params = {
		    engId,
		    stationId,
		    statusExam: '-1'
		  }
		  this.$apiRequest.gcgkApi.getProblemDetail(params).then(res => {
			  console.log(res)
			  let txgcgkDtEng = res.data.txgcgkDtEng,rectificationList = res.data.rectificationList;
			  rectificationList.map((item)=>{
				this.problemActiveNames.push(item.title)
				item.equList && item.equList.map((equitem)=>{
					equitem.isSubmit = false;
					equitem.isNotList!==undefined && equitem.isNotList.length>0 && equitem.isNotList.map((isnotitem, isIndex)=>{
            // 整改后图片处理

						isnotitem.fileList.length>0 && isnotitem.fileList.map((fileitem,index)=>{
              let preName = ''
              let bgImg = require("../../../../static/controlImg/bg_pz.png")

              if (isIndex === 0){
                if(index == 0) {
                  preName ='资产全貌'
                  bgImg = require("../../../../static/img/bg_zcqm.png")
                }
                if(index == 1) {
                  preName ='铭牌照片'
                  bgImg = require("../../../../static/img/bg_mpzp.png")
                }
              }
              fileitem.previewName = preName
              fileitem.bgImg = bgImg
              fileitem.img = fileitem.img && this.baseUrl  + fileitem.img
						})
            // isnotitem.fileList = []
            if (isnotitem.isSelect&& isnotitem.fileList.length<9) {
              isnotitem.fileList.push({ img: '',raw: null,type: '',bgImg: require("../../../../static/controlImg/bg_pz.png")})
            }
            // 整改前图片处理
            isnotitem.oldFlieList&&isnotitem.oldFlieList.length>0 && isnotitem.oldFlieList.map((fileitem,index)=>{
							fileitem.img = fileitem.img ? this.baseUrl  + fileitem.img : ''
						})
            isnotitem['beforeIsSelect'] = isnotitem.isSelect
					})
					this.equipmentActiveNames.push(equitem.title)
				})
			  })
			  this.rectificationList = rectificationList
			  this.problemForm = {
			    engName:txgcgkDtEng.engName,
			    siteName:txgcgkDtEng.stationName,
			    batchName:txgcgkDtEng.batchName,
			    consName:txgcgkDtEng.consName
			  }
			  this.rectificationList = rectificationList;
		    // if(res.rows === []) {
		    //   this.todoList = '暂无数据'
		    // }else {
		    //   this.todoList = res.rows
		    // }
		  })
	  },
    goBack() {
      // uni.navigateTo({
      //   url: '/pages/communicationControl/workbench/todoTask/todoList'
      // })
	  uni.navigateBack()
    },
    onOpenPicker(e,indexs) {
      this.pickerName = e.selectTitle
      this.currentIndex = indexs
      this.showSelectCovert = true
    },
    onConfirm(value) {
      merge(this.rectificationList[this.currentIndex[0]].equList[this.currentIndex[1]].isNotList[this.currentIndex[2]],
          {selectName:value,isSelect: value == '是' ? 1 : 0})

      this.rectificationList[this.currentIndex[0]].equList[this.currentIndex[1]].isNotList[this.currentIndex[2]].fileList = [{img: '',raw: null, type: '',bgImg: require("../../../../static/controlImg/bg_pz.png"),}]
      this.rectificationList[this.currentIndex[0]].equList[this.currentIndex[1]].isNotList[this.currentIndex[2]].notesAfter = ''

      this.showSelectCovert = false
    },
    imageHandle(imgIndex, imgItem, handleType,i) {
      this.currentImgIndex = i
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgIndex, imgItem)
      } else if (handleType === 'PREVIEW') {
        this.files = [imgItem]
        this.showPreview = true
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          title: `是否确认删除`
        })
        .then(() => {
          let fileTempList = [
            {
              img: '',
              raw: null,
              type: '',
              previewName: "资产全貌",
              bgImg: require("../../../../static/img/bg_zcqm.png"),
            },
            {
              img: '',
              raw: null,
              type: '',
              previewName: "铭牌照片",
              bgImg: require("../../../../static/img/bg_mpzp.png"),
            },
            {
              img: '',
              raw: null,
              type: '',
              bgImg: require("../../../../static/controlImg/bg_pz.png"),
          }]
          if (this.currentImgIndex[2] != 0) {
            this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]].fileList.splice(imgIndex,1);
          } else { // 安装下
            if(imgIndex>1) {
              this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]].fileList.splice(imgIndex,1);
            }else {
              this.$set(this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]].fileList, imgIndex, fileTempList[imgIndex])
            }
          }
          if (this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]].fileList.length<9) {
            let len = this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]].fileList.length-1
            if (this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]].fileList[len].img) {
              this.rectificationList[this.currentImgIndex[0]].equList[this.currentImgIndex[1]].isNotList[this.currentImgIndex[2]].fileList.push({
                img: '',
                raw: null,
                type: '',
                bgImg: require("../../../../static/controlImg/bg_pz.png")
              })
            }
          }
        })
        .catch(() => {
        })
      }
    },
     choosePhoto1(imgIndex, imgItem){
      let _this = this

      const photoName = `${new Date().getTime()}`
      merge(_this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]]
          .fileList[_this.currentImgIndex[3]],{
        img: this.imgBase64,
        raw: _this.dataURLtoFile(this.imgBase64,`${photoName}.jpeg`),
        type: imgItem.type,
        bgImg: require("../../../../static/controlImg/bg_pz.png")
      })
      let listArr = _this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]]
          .fileList
      if (listArr.length < 9&& listArr[listArr.length-1].img) {  // 最多上传9张 不够添加空对象
        _this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]]
            .fileList.push({
          img: '',
          raw: null,
          type: '',
          bgImg: require("../../../../static/controlImg/bg_pz.png")
        })
      }
      if (_this.delList.includes(imgItem.type)) {
        _this.delList = _this.delList.filter(item => {
          if (item === imgItem.type) {
            return false
          }
          return true
        })
      }

    },
    choosePhoto(imgIndex, imgItem) {
      let _this = this
      wx.chooseImage({
        count: 1,
        sourceType: ['album','camera'],
        success: chooseImageRes => {
          wx.getLocalImgData({
            localId: chooseImageRes.localIds[0].toString(),
            success: function (res) {
              const localData = res.localData
              let imageBase64 = ''
              if (localData.indexOf('data:image') == 0) {
                //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                imageBase64 = localData
              } else {
                //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                imageBase64 =
                    'data:image/jpeg;base64,' + localData.replace(/\n/g, '')
              }
              const photoName = `${new Date().getTime()}`
                merge(_this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]]
                    .fileList[_this.currentImgIndex[3]],{
                  img: imageBase64,
                  raw: _this.dataURLtoFile(imageBase64,`${photoName}.jpeg`),
                  type: imgItem.type
                })
                let listArr = _this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]].fileList
                if (listArr.length < 9&& listArr[listArr.length-1].img) {  // 最多上传9张 不够添加空对象
                  _this.rectificationList[_this.currentImgIndex[0]].equList[_this.currentImgIndex[1]].isNotList[_this.currentImgIndex[2]].fileList.push({
                    img: '',
                    raw: null,
                    type: '',
                    bgImg: require("../../../../static/controlImg/bg_pz.png")
                  })
                }
                if (_this.delList.includes(imgItem.type)) {
                  _this.delList = _this.delList.filter(item => {
                    if (item === imgItem.type) {
                      return false
                    }
                    return true
                  })
                }

            }
          })
        },
        fail: error => {}
      })
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
  }
};
</script>
<style scoped lang="scss">
.problem-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .problem-content {
    width: calc(100% - #{px2vw(60)});
    margin: px2vh(30) px2vw(30);
    height: calc(100vh - #{px2vh(230)});
    overflow: auto;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .basic-info {
      height: auto;
      margin-bottom:px2vh(30);
      background: #fff;
    }
    .title-collap {
      font-size: px2vh(40);
      font-weight: bold;
      color: #666;
    }
    .small-title {
      font-size: px2vh(42);
      color: #417ADC;
      font-weight: bold;
      margin-left: px2vw(50);
    }
    .rectify-content {
      height: auto;
      .resctify-main {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        background: #fff;
        margin-top: px2vh(30);
        margin-bottom: px2vh(30);
        text {
          width: 100%;
          margin: px2vh(60) px2vw(48);
          display: block;
          font-size: px2vh(42);
          color: #666;
        }
        .image-list {
          width: px2vw(230);
          height: px2vw(230);
          flex-shrink: 0;
          margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(45) calc((100% - #{px2vw(690)}) / 6);
          img {
            width: px2vw(230);
            height: px2vh(230);
          }
        }
        .upload-button {
          width: px2vw(230);
          height: px2vw(230);
          flex-shrink: 0;
          position: relative;
          background-image: url('../../../../static/controlImg/bg_pz.png');
          background-size: 100% px2vw(230);
          margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(60);
		  img {
		    width: px2vw(230);
		    height: px2vw(230);
		    border-radius: px2vw(6);
		  }
          .typetext {
            background-color: #fff;
            position: absolute;
            bottom: px2vh(-70);
            left: calc(50% - #{px2vw(46)});
            color: #dbdbdb;
            font-size: px2vh(42);
            span {
              color: #ff4355;
            }
          }
          .delete-icon {
            position: absolute;
            top: px2vw(-20);
            right: px2vw(-20);
            width: px2vw(40);
            height: px2vw(40);
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
           .small-name {
              position: absolute;
              width: px2vw(230);
              text-align: center;
              bottom: px2vh(-46);
              font-size: px2vh(32);
              color: #dbdbdb;
            }
        }
        .signintitle {
          width: 100%;
          flex-direction: column;
          font-size: px2vh(42);
          color: #666666;
          padding-bottom: px2vh(60);
          box-sizing: border-box;
          .notes {
            padding: px2vh(54) 0;
            box-sizing: border-box;
            border-bottom: 2px dashed #f2f6fa;
            margin: 0 px2vh(50) px2vh(54);
            span {
              color: #ff4355;
            }
          }
          .notestext {
            background-color: #fafafa;
            margin: 0 px2vh(50);
            /deep/.van-cell {
              background-color: #fafafa;
            }
          }
        }
      }
    }
  }
}
.arrive-fold /deep/.van-cell {
  background: #F2F6FA;
}
/deep/.van-collapse-item__content {
  padding: 0 0 !important;
  background: #F2F6FA;
}
/deep/.van-cell--large {
  padding: px2vh(16) px2vw(20);
}
.arrive-second /deep/.van-cell {
  background: #fff;
}
/deep/.van-hairline--top-bottom {
  margin-bottom: px2vh(20);
}
/deep/.van-collapse-item__content {
  padding-left: px2vw(30);
}
/deep/.van-button {
  width: 100%;
  height: px2vh(120);
  color: #fff;
  float: left;
  margin-bottom: px2vh(20);
  background-color: #417ADC;
  border: 1px solid #417ADC;
  border-radius: px2vh(60);
}
.van-preview-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .van-swipe {
        width: 100%;
        height: 60%;
        .van-swipe-item {
          display: flex;
          align-items: center;
          img {
            width: 100%;
          }
        }
      }
}
.van-popup {
  background-color: #eee;
  .van-cell {
    position: absolute;
    bottom: 0;
    border-top: 4px solid #eee;
    z-index: 3;
  }
}
</style>
